Welcome back.
In this lecture we're going to be taking a look at UI buttons.
We have two buttons available to us in the Roblox API.
And those are image buttons and text buttons.
As the name suggests you can put text in one and you can put images in the other.
So let's go ahead and insert both of these buttons into our GUI.
We'll add our image button as well as our text button.
There are our buttons and their full glory.
And what you should immediately notice right away is that as my mouse hovers over my text button, you
can see the color changes, which is pretty cool.
And that's because these buttons have a property, I believe, called auto button color.
So yeah, if you look in the properties panel, these have a property called auto button color.
And it will automatically update the color of the button when you hover over it, or you hold down your
mouse button on it.
If you want to be able to change or do your own kind of auto button coloring, then you would disable
this property and listen to some of the events for the button, like when the mouse enters and leaves
and stuff like that.
But for the most part, again, they have basically all the same properties.
As a normal frame, you can adjust the size, the position, the color, and of course, all of those
UI constraints that we talked about earlier work on our buttons.
So with our text button, we could add a gradient to the background of the button.
If we wanted to change the color up a bit, maybe we want red to let's say a nice purple color.
We can do that.
There's our red to purple button.
We can place a UI corner in here to round the edges of our button.
There's a whole bunch of stuff we can do to stylize our buttons.
And of course, since this is a text button, it has all of the same properties that a text label would.
So you can change the font boldness, italicize it, change the text, the color, blah blah blah.
All these same properties as a normal text label.
The only difference between this and a text label is that this has some extra events to listen to when
a player clicks on it, or they tap it with their finger on a mobile device.
Same thing goes with an image button, has the same properties as an image label, so you can change
the resampling mode.
You can change the scaling type, but there is an additional option right here.
So when a player holds down or presses down on your button, you can change the image to something different.
That's why it's called a pressed image.
So that's an extra option.
You get there.
And you also have the ability to add a different image when a player is hovering over that guy with
their mouse.
So that's another cool feature.
But of course same properties as before.
You get an auto button color property and the same properties as a frame.
The main thing I'm interested in with these buttons are their events.
So let's go ahead and add a local script into our screen.
Guy no, I don't want to try I coding, leave me alone.
We'll make a reference to our guy which is script dot parent.
And then let's go ahead and grab one of our buttons.
For example, let's grab our text button inside of our text button.
We're going to have an event, for example, fired when the mouse has fully left clicked the G button.
So this is specifically listening for when a player presses down their left click button on the text
button.
We have some other events that are related with instances such as destroy and stuff like that.
Don't care about those, but I am more keen to learn about the different events specifically for these
buttons.
For example, the activated event states that it is fired when the button is activated.
This is the event you want to use for listening to input on your button from multiple different devices,
so this will work with mouses, this will work with mobile devices and this will work on console.
So let's go ahead and actually connect a function to this event.
And every time this text button is activated let's just print out a message saying the button was activated.
So let's go ahead and play our game.
Here's our beautiful button.
And if I hover my mouse over it you can see the auto button color property is doing its job.
And then if I click there we go.
The button was activated.
And I can continue to click it over and over and I can spam click it as well and print that statement
out as many times as I want.
But I'm clicking it every single time and we're getting a nice print statement.
Now let's do something a little bit funny with this event.
Let's go ahead and convert the size of my text button to scale.
And what I'm going to do is actually let's go ahead and use a UI scale property.
Let's actually go ahead and use this constraint every single time that my text button is activated.
Let's go ahead and update the UI scales value, which is the scale property, lets it decrease that
by 0.1.
Or actually let's do 0.05 every single time we click.
So every single time we click our button, it should get smaller and smaller and smaller.
And then to have this button scale properly let's go ahead and set the anchor point to be in the middle
of the button.
So that way it's scaling from the center.
Hold on.
It didn't put in the middle.
There we go.
Now it's in the middle.
So there's our anchor point in the center of the button.
And let's go ahead and play test.
And if I click my button, oh, it got smaller.
And if I can continue to click it, it's getting smaller and smaller and smaller until, oh, eventually
it is gone.
Now there are some other events we can go ahead and listen to.
For example, with our text button, we can listen for when a mouse enters or hovers over it.
And we can also listen for when a mouse leaves.
So these are the events we would use to override the auto button color property.
So let's go ahead and disable that property.
Right.
And then when a mouse enters or hovers over our object, let's go ahead and connect a function.
What we want to do is let's make the color darker in our guy.
So I'm just going to get rid of the gradient for now.
So that way we just have a normal white color here.
And what we're going to do is we're going to get the HSV color of this object.
So we can do g dot text button dot background color three.
And then let's convert it to HSV, which is going to return the hue saturation and a value of a color.
And we can take this value and alter it to change the brightness of the color.
So let's go ahead and get those values I believe.
What did it say.
Return.
First it was two HSV.
It's not auto filling for me I don't know why.
Hold on.
Two HSV Hue Saturation okay.
So we will get our hue, our saturation and then our value.
And then let's just go ahead and decrease this value by some constant.
Like we'll decrease it by 0.5.
And then let's go ahead and set GUI dot text button dot background color three to be equal to a new
color three from HSV.
And then we can pass our hue our saturation and our new value.
And then we'll copy this.
And this time, when the mouse leaves the GUI, we want to restore it back to its original color.
So this time we want to increment our value by 0.5 and then set that as the color.
And then let me make sure yep, auto button color is disabled.
So let's go ahead and test out to see if this works.
If I go and hover over the button, there we go.
It became darker and then when I leave, it's back to its default.
So now we have overrided the auto button color with our own custom color.
There are also some additional events relating specifically for mobile input, so you can listen for
when it is touch tapped, when you pan across it with your finger, when a player holds down on the
button for a long time, when they pinch it, when they swipe it, or when they try to rotate with their
fingers.
There's a whole bunch of different events in here that you can use specifically for mobile devices,
but if you have a button that you simply just want to be able to click and listen for that for all devices,
that's what you would use the activated event for.
These same events also exist within our image button.
So it also has an activated event.
It also has a mouse enter event and it also has a mouse leave event as well as events like for all of
the touches.
And then there's some other additional events specifically for mice.
For example, if you hold down with your mouse button or if you lift up with your mouse button, if
you use the scroll wheel, stuff like that.
There's a whole bunch of different events in here that you can use to basically script these UI buttons
however you want.
The last thing I guess we could actually take a look at is the hover, the pressed image, and then
the image properties for our image button.
So let's just grab some random images here like, uh, this will work.
So we'll copy this asset ID this will be the normal image for our button.
And then let me change the background transparency to one.
And then if our player hovers their mouse over the button, let's change it to this face.
So we'll paste that in there.
And then if the player presses down on it, um, I guess we'll just set it to a troll face.
Why not?
If we go and hover our mouse over the button, there we go.
We get a happy face.
And then if we hold down.
Actually not working, which is kind of interesting.
Did I accidentally put the exact same image I might have?
Let's go ahead and take a look.
Okay.
Yeah, I accidentally put the exact same image ID, so let me fix that.
I thought I copied the troll face ID copy.
Press image.
Okay, there we go.
It should be on the troll face now.
Let's try that again.
So if my mouse hovers over my object happy face, and then if I press down troll face, isn't that kind
of neat?
So that's all for me in this lecture.
Thank you for watching and I'll see you in the next one.